<template>
    <client-only>
        <div class="s">
            <!-- hello {{index}} -->
            <el-button type="primary">Primary1</el-button>
            <el-button type="success">Success</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
            <NuxtLink to="/posts/1">Home1</NuxtLink>
            <div @click="toUser">666666</div>
            <NuxtLink to="/posts/2">Home2</NuxtLink>
            <el-icon><Close /></el-icon>
            <el-icon><Refresh /></el-icon>
            <NuxtLink to="/parent">Parent</NuxtLink>
        </div>
    </client-only>
    <ul>
        <li v-for="item in list" :key="item.id">
            {{ item.title }}
            <img :src="item.thumbnail" alt="">
        </li>
    </ul>
</template>

<script setup lang="ts">
import { listApi } from '~/api/index';
import type { Action } from 'element-plus'
interface Item {
    title: string;
    id: any;
    thumbnail: string;
}
const list = ref<Item[]>([])

const apiKey = useRuntimeConfig().apiKey;
const baseUrl = useRuntimeConfig().public.baseURL;
const getList = async ()=> {
    const { data } = await listApi()
    list.value = data.data
}
await getList()
function toUser() {
    navigateTo({
        path: '/posts/4',
        query: {
            name: 'snow',
        }
    })
}
const showElert = () => {
    ElMessageBox.alert('This is a message', 'Title', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action:Action) => {
            ElMessage({
                type: 'info',
                message: `action: ${action}`,
            })
        },
    })
}
</script>

<style lang="scss" scoped>
    .s{
        color:$secondary;
    }
</style>